import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12


Window {
    visible: false
    id: launcher
    width: 650
    height: 50
    flags: Qt.FramelessWindowHint | Qt.WindowStaysOnTopHint
    color: "transparent"

    Rectangle {
        id: textInputArea
        width: 650
        height: 50
        anchors.margins: 1
        color: "#ffffff"
        border.color: "#ececec"
        border.width: 1
        radius: 3

        MouseArea {
            id: area
            width: parent.width
            height: parent.height
            anchors.fill: parent
            hoverEnabled: true

            onEntered: {
                console.log("enter the input area");
                textInputArea.border.color = "#cccccc";
            }

            onExited: {
                console.log("exit the input area");
                textInputArea.border.color = "#ececec";
            }
        }

        TextInput {
            id: textInput
            width: 580
            height: 50
            selectionColor: "#3390ff"
            anchors.left: parent.left
            anchors.top: parent.top
            anchors.bottom: parent.bottom
            anchors.right: rect1.left
            anchors.leftMargin: 13
            anchors.rightMargin: 1
            anchors.bottomMargin: 3
            anchors.topMargin: 15
            font.family: "微软雅黑"
            font.pointSize: 12
            font.weight: Font.Thin
            focus: true
            selectByMouse: true
            clip: true

            onAccepted: {
                console.log("accepted, text: " + textInput.text)
                // TODO:将任务发送到后台保存下来
                textInput.clear()
                clearTextButton.visible = false;
            }

            onTextEdited: {
                console.log("text edited, length: " + textInput.length)
                if (textInput.length > 0) {
                    clearTextButton.visible = true;
                } else {
                    clearTextButton.visible = false;
                }
            }
        }

        Rectangle {
            id: rect1
            width: 50
            height: 50
            color: "transparent"
            anchors.left: textInput.right
            anchors.top: parent.top
            anchors.bottom: parent.bottom
            anchors.right: parent.right
            anchors.leftMargin: 10;

            IconButton {
                id: clearTextButton
                visible: false
                width: 15
                height: 15
                color: "transparent"
                anchors.left: parent.left;
                anchors.top: parent.top;
                anchors.bottom: parent.bottom;
                anchors.right: speakerButton.left;
                anchors.leftMargin: 1
                anchors.rightMargin: 1
                anchors.bottomMargin: 15
                anchors.topMargin: 15
                iconImageSource: "qrc:/clear_text.png"

                onIconButtonClicked: {
                    console.log("clear text buttom clicked.")
                    textInput.clear()
                }
            }

            IconButton {
                id: speakerButton
                width: 12
                height: 12
                color: "transparent"
                anchors.left: clearTextButton.right;
                anchors.top: parent.top;
                anchors.bottom: parent.bottom;
                anchors.right: parent.right
                anchors.leftMargin: 1
                anchors.rightMargin: 1
                anchors.bottomMargin: 15
                anchors.topMargin: 15
                iconImageSource: "qrc:/speaker.png"
            }
        }
    }
}


/*##^##
Designer {
    D{i:0;formeditorZoom:1.25}
}
##^##*/
